<template>
  <div>
    <a-form-model-item label="检查日期" :labelCol="{ span: 4 }">
      <a-date-picker
        v-model="laboratory.bloodFatCheckDate"
        :disabled-date="disabledDate"
        @change="onChange"
        style="width: 200px"
      />
    </a-form-model-item>

    <a-form-model-item label="总胆固醇（TC）" :labelCol="{ span: 4 }">
      <a-input-number :min="0" v-model="laboratory.tc" :style="{ width: '90px' }" />
      <span :style="{ marginLeft: '0.5rem' }">mmol/L</span>
    </a-form-model-item>

    <a-form-model-item label="甘油三脂（TG）" :labelCol="{ span: 4 }">
      <a-input-number :min="0" v-model="laboratory.tg" :style="{ width: '90px' }" />
      <span :style="{ marginLeft: '0.5rem' }">mmol/L</span>
    </a-form-model-item>

    <a-form-model-item label="高密度脂蛋白（HDL-C）" :labelCol="{ span: 4 }">
      <a-input-number :min="0" v-model="laboratory.hdlc" :style="{ width: '90px' }" />
      <span :style="{ marginLeft: '0.5rem' }">mmol/L</span>
    </a-form-model-item>

    <a-form-model-item label="低密度脂蛋白（LDL-C）" :labelCol="{ span: 4 }">
      <a-input-number :min="0" v-model="laboratory.ldlc" :style="{ width: '90px' }" />
      <span :style="{ marginLeft: '0.5rem' }">mmol/L</span>
    </a-form-model-item>

    <a-form-model-item label="非高密度脂蛋白（nonHDL-C）" :labelCol="{ span: 4 }">
      <a-input-number :min="0" v-model="laboratory.nonHdlc" :style="{ width: '90px' }" />
      <span :style="{ marginLeft: '0.5rem' }">mmol/L</span>
    </a-form-model-item>

    <!-- <a-divider orientation="left" :style="{ marginTop: '40px' }">上传实验室检测报告单</a-divider>

    <a-form-model-item label="报告名称">
      <a-input v-model="laboratory.lipidReportName" :max-length="20" :style="{ width: '300px' }" />
    </a-form-model-item>

    <a-form-model-item label="报告结论">
      <a-textarea
        :maxLength="500"
        v-model="laboratory.lipidReportConclusion"
        placeholder=""
        :auto-size="{ minRows: 7, maxRows: 10 }"
        :style="{ width: '300px' }"
      />
      <div
        v-if="laboratory.lipidReportConclusion != null && laboratory.lipidReportConclusion.length > 0"
        :style="{ display: 'inline-block', marginLeft: '1rem' }"
      >
        {{ laboratory.lipidReportConclusion.length }}/500
      </div>
    </a-form-model-item>

    <a-form-model-item v-bind="tailFormItemLayout">
      <j-image-upload
        text="上传"
        v-model="laboratory.lipidReportPhoto"
        :is-multiple="true"
        :style="{ marginTop: '1.5rem' }"
        :preview="true"
        :img-arr="
          Array.isArray(laboratory.lipidReportPhoto)
            ? laboratory.lipidReportPhoto
            : laboratory.lipidReportPhoto
            ? laboratory.lipidReportPhoto.split(',')
            : []
        "
      ></j-image-upload>
    </a-form-model-item> -->

    <a-form-model-item :wrapper-col="{ span: 12, offset: 10 }">
      <a-button type="primary" @click="onSave" :loading="saveLoading">保存</a-button>
      <a-popconfirm placement="topLeft" ok-text="是" cancel-text="否" @confirm="doConfirm">
        <template slot="title">
          <p>{{ text }}</p>
        </template>
        <a-button type="primary" style="margin-left: 30px" :loading="confirmLoading">确认完成</a-button>
      </a-popconfirm>
      <a-button type="primary" style="margin-left: 30px" @click="endServiceOk" :loading="saveLoading"
        >服务后数据录入完成</a-button
      >
    </a-form-model-item>
  </div>
</template>

<script>
import moment from 'moment'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { getAction, postAction } from '@/api/manage'
import bus from '@/utils/bus'

export default {
  name: 'bloodlipidsCheck',
  props: ['laboratory'],
  data() {
    return {
      loading: true,
      saveLoading: false,
      confirmLoading: false,
      text: '此操作代表你已完成了页面的填写，是否继续？',
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0
          },
          sm: {
            span: 12,
            offset: 2
          }
        }
      }
    }
  },
  methods: {
    onChange(date, dateString) {
      this.laboratory.bloodFatCheckDate = this.laboratory.bloodFatCheckDate.format('YYYY-MM-DD hh:mm:ss')
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current > moment().endOf('day')
    },
    onSave() {
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      const params = this.laboratory
      let queryData = {
        bloodFatCheckDate: params.bloodFatCheckDate,
        hdlc: params.hdlc,
        ldlc: params.ldlc,
        lipidReportConclusion: params.lipidReportConclusion,
        lipidReportName: params.lipidReportName,
        lipidReportPhoto: params.lipidReportPhoto,
        lipidsIsFinished: params.lipidsIsFinished,
        nonHdlc: params.nonHdlc,
        tc: params.tc,
        tg: params.tg
      }
      const data = Object.values(queryData).filter(v => v)
      if (data.length == 0) return
      queryData.dataId = params.dataId
      queryData.patientId = patientId
      this.loading = true
      this.saveLoading = true
      postAction('dossier/laboratory/lipid/update', queryData)
        .then(res => {
          if (res.success) {
            this.$message.success('操作成功')
            this.$emit('next', '4')
          } else {
            this.$message.error('操作失败')
          }
        })
        .finally(_ => {
          this.saveLoading = false
          this.loading = false
        })
    },
    doConfirm() {
      this.confirmLoading = true

      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]

      let params = {
        patientId: patientId,
        isFinished: 1,
        type: 3
      }
      postAction('102/10/1021303', params)
        .then(res => {
          if (res.success) {
            this.$message.success('页面已确认', 5)
            this.$emit('next', '4')
          }
        })
        .finally(_ => {
          this.confirmLoading = false
        })
    },
    endServiceOk() {
      this.onSave()
      bus.$emit('modifiedDataForFinalReportByLab', {
        type: '实验室检测',
        data: this.laboratory
      })
      // this.$router.back(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.ant-form-item {
  margin: 0.5rem;
}
</style>

